<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>React Template Page</title>
</head>
<body>

<div id="root"></div>

<script src="../cdn/react/react.production.min.js"></script>
<script src="../cdn/react/react-dom.production.min.js"></script>
<script src="../cdn/react/babel.min.js"></script>

<script type="text/babel">

    function AppRoot() {

        let [title, setTitle] = React.useState('Hello React');

        React.useEffect(() => {
            console.log("effect func running...")
        }, [])

        return (<h2>{title}</h2>)

    }

    ReactDOM.render(
        <AppRoot/>,
        document.getElementById('root')
    );


</script>
</body>
</html>
